<template>
  <el-collapse :="attrs">
    <el-collapse-item
      v-for="(item, i) in collapseList"
      :key="i"
      :title="item.name"
      :name="item.name"
      :id="item.id"
    >
      <template #default>
        <slot :item></slot>
      </template>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup name="PiCollapse">
const attrs = useAttrs();
const { collapseList } = defineProps({
  collapseList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
</script>

<style scoped lang="less">
.el-collapse {
  border: none;
  :deep(.el-collapse-item__header) {
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background-color: var(--el-color-info-light-9);
  }
  :deep(.el-collapse-item__wrap) {
    padding: 10px 0;
    border-bottom: none;
    .el-collapse-item__content {
      font-size: 14px;
      padding-bottom: 0;
    }
  }
}
</style>
